XPages, CSS and Profile Application

HCL Notes/Domino 8.5 Forum (includes Notes Traveler)

Subject: XPages, CSS and Profile Application

Feedback Type: Question

Product Area: Domino Designer on Eclipse (DDE)

Technical Area: Functionality

Platform: ALL

Release: 8.5

Reproducible: Always

This is a long one so let me get right to the question:

How do you you send specific CSS to different browsers in XPages? I've seen references to this in the oneUI stuff, but I haven't figured it out yet.

I'm working with XPages and the Profile application that was demo's at SHOW106 in Lotusphere and posted to the wiki here:

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/LS09_SHOW106.htm

What I'm really trying to do is better figure out repeat controls and how to use them. I really like what was done with the "My Friends" section of the Profiles application. Specifically the listing of friends that are displayed in a box from left to right:

This looks great.... in Firefox. But in IE7 they don't go from left to right. They go vertical:

(We've also lost the rounded corners, but I'm not too worried about that right now.)

Now I'm not a CSS expert by any stretch of the imagination. But it looks to me like IE7 doesn't support "display: inline-block"

The actual CSS is here to control these boxes is this:

.friendsPanel{
display:inline-block;
padding:4px;
margin:4px;
background-color:#f0f4f9;
border:1px solid #c0c0c0;
-moz-border-radius:4px;
-webkit-border-radius:4px;}

In searching the internet I found some workarounds for this, but I'm not sure how to apply a workaround for a specific browser in XPages.

I found one possible solution on webdeveloper.com:

but I don't know how to implement this. I'm not sure how to add HTML directly to an XPage and I thought there is a nicer way to handle this kind of browser difference...

I know this was a long one, but I wanted to make sure I got the point across. Thanks for reading and for any advice!

Feedback number DLEY7SAFUQ created by ~Isaac Fezboosiakoi on 05/22/2009

Status: Open
Comments: